<template>
  <div v-if="!isLoading"
       style="align-self: center;justify-items: center">
    <h1>资源申请确认</h1>
    <el-form ref="form" :model="proInfo" label-position="left" label-width="80px"
             style="margin-left:10%;width: 80%;align-self: center">
      <el-form-item label="功能名称">
        <el-input disabled v-model="proInfo.pro_name"/>
      </el-form-item>

      <el-radio-group v-model="radio_select">
        <el-radio :label="null">显示全部</el-radio>
        <el-radio :label="'0'">当前可用</el-radio>
        <el-radio :label="'1'">当前不可用</el-radio>
        <el-radio :label="'2'">暂时不可用</el-radio>
      </el-radio-group>

      <el-card class="display-card">
        <template #header>
          实验药品申请信息
        </template>
        <template v-for="(res) in proInfo.drug_info">

        <el-form-item

            :label="res.name"
            :key="res.key"
            style="flex: 1"
            v-if="(radio_select==null)||(radio_select===res.app_status)">
          <el-col :span="4">
            需求数量:&nbsp;&nbsp;&nbsp;{{ res.need_num }}
          </el-col>

          <el-col :span="10" :offset="1">
            <el-radio-group :fill="radio_color[res.app_status]" v-model="res.app_status">
              <el-radio-button border label="0">当前可用</el-radio-button>
              <el-radio-button border label="1">当前不可用</el-radio-button>
              <el-radio-button border label="2">暂时不可用</el-radio-button>
            </el-radio-group>
          </el-col>

          <span v-if="res.app_status==='2'">
          <el-col :span="2" :offset="1">
            可用时间:&nbsp;&nbsp;&nbsp;
          </el-col>
          <el-col :span="4">
            <el-date-picker type="date" placeholder="选择日期" v-model="res.available_time1" style="width: 100%;"/>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="4">
            <el-time-picker placeholder="选择时间" v-model="res.available_time2" style="width: 100%;"/>
          </el-col>
        </span>
        </el-form-item>
        </template>
      </el-card>


      <el-card class="display-card">
        <template #header>
          实验器材申请信息
        </template>
        <template v-for="(res) in proInfo.equ_info">

        <el-form-item
            :label="res.name"
            :key="res.key"
            style="flex: 1"
            v-if="(radio_select==null)||(radio_select===res.app_status)">
          <el-col :span="4">
            需求数量:&nbsp;&nbsp;&nbsp;{{ res.need_num }}
          </el-col>

          <el-col :span="10" :offset="1">
            <el-radio-group :fill="radio_color[res.app_status]" v-model="res.app_status">
              <el-radio-button border label="0">当前可用</el-radio-button>
              <el-radio-button border label="1">当前不可用</el-radio-button>
              <el-radio-button border label="2">暂时不可用</el-radio-button>
            </el-radio-group>
          </el-col>

          <span v-if="res.app_status==='2'">
          <el-col :span="2" :offset="1">
            可用时间:&nbsp;&nbsp;&nbsp;
          </el-col>
          <el-col :span="4">
            <el-date-picker type="date" placeholder="选择日期" v-model="res.available_time1" style="width: 100%;"/>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="4">
            <el-time-picker placeholder="选择时间" v-model="res.available_time2" style="width: 100%;"/>
          </el-col>
        </span>
        </el-form-item>
        </template>
      </el-card>


      <el-card class="display-card">
        <template #header>
          实验动物申请信息
        </template>
        <template v-for="(res) in proInfo.animal_info">
        <el-form-item
            :label="res.name"
            :key="res.key"
            style="flex: 1"
            v-if="(radio_select==null)||(radio_select===res.app_status)">

          <el-col :span="4">
            需求数量:&nbsp;&nbsp;&nbsp;{{ res.need_num }}
          </el-col>

          <el-col :span="10" :offset="1">
            <el-radio-group :fill="radio_color[res.app_status]" v-model="res.app_status">
              <el-radio-button border label="0">当前可用</el-radio-button>
              <el-radio-button border label="1">当前不可用</el-radio-button>
              <el-radio-button border label="2">暂时不可用</el-radio-button>
            </el-radio-group>
          </el-col>

          <span v-if="res.app_status==='2'">
          <el-col :span="2" :offset="1">
            可用时间:&nbsp;&nbsp;&nbsp;
          </el-col>
          <el-col :span="4">
            <el-date-picker type="date" placeholder="选择日期" v-model="res.available_time1" style="width: 100%;"/>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="4">
            <el-time-picker placeholder="选择时间" v-model="res.available_time2" style="width: 100%;"/>
          </el-col>
        </span>
        </el-form-item>
        </template>
      </el-card>

      <el-card class="display-card">
        <template #header>
          生物样本申请信息
        </template>
        <template v-for="(res) in proInfo.sample_info">

        <el-form-item

            :label="res.name"
            :key="res.key"
            style="flex: 1"
            v-if="(radio_select==null)||(radio_select===res.app_status)">

          <el-col :span="4">
            需求数量:&nbsp;&nbsp;&nbsp;{{ res.need_num }}
          </el-col>

          <el-col :span="10" :offset="1">
            <el-radio-group :fill="radio_color[res.app_status]" v-model="res.app_status">
              <el-radio-button border label="0">当前可用</el-radio-button>
              <el-radio-button border label="1">当前不可用</el-radio-button>
              <el-radio-button border label="2">暂时不可用</el-radio-button>
            </el-radio-group>
          </el-col>

          <span v-if="res.app_status==='2'">
          <el-col :span="2" :offset="1">
            可用时间:&nbsp;&nbsp;&nbsp;
          </el-col>
          <el-col :span="4">
            <el-date-picker type="date" placeholder="选择日期" v-model="res.available_time1" style="width: 100%;"/>
          </el-col>
          <el-col class="line" :span="2">-</el-col>
          <el-col :span="4">
            <el-time-picker placeholder="选择时间" v-model="res.available_time2" style="width: 100%;"/>
          </el-col>
        </span>
        </el-form-item>
        </template>
      </el-card>

      <el-form-item style="margin-top: 30px">
        <el-button type="primary" @click="onSubmit">确定提交</el-button>
        <el-button type="warning" @click="onWait">返回上级</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {get} from "@/utils/http";
import {ElMessage} from "element-plus";

export default {
  name: "resourceConfirm",
  data() {
    return {
      isLoading: true,
      radio_select: null,
      proInfo: null,
      radio_color: ['green', 'red', 'orange']
    }
  },
  created() {
    this.pro_id = this.$route.params.pro_id;
    if (this.pro_id===undefined){
      this.pro_id=sessionStorage.getItem("pro_id");
    }else {
      sessionStorage.setItem("pro_id",this.pro_id)
    }

    this.getData();
  },
  methods: {
    getData() {
      let that = this;
      get("/funcUnit/getInfo", {
        id: this.pro_id
      }).then(function (res) {
        if (res.code === 1) {
          res = res.data;
          that.proInfo = res;
          that.proInfo.equ_info = JSON.parse(res.equ_info);
          that.proInfo.drug_info = JSON.parse(res.drug_info);
          that.proInfo.animal_info = JSON.parse(res.animal_info);
          that.proInfo.sample_info = JSON.parse(res.sample_info);

          that.isLoading = false;
        }
      })
    },
    onSubmit() {

      get("/funcUnit/updateResInfo", {
        id: this.proInfo.pro_id,
        equ_info: JSON.stringify(this.proInfo.equ_info),
        animal_info: JSON.stringify(this.proInfo.animal_info),
        drug_info: JSON.stringify(this.proInfo.drug_info),
        sample_info: JSON.stringify(this.proInfo.sample_info),
      }).then(function (res) {
        if (res.code === 1) {
          ElMessage.success({
            showClose: true,
            message: "实验资源信息已更新",
            type: "success",
            center: true
          })
        }
      })
    },
    onWait(){
      history.back();
    }
  },
}
</script>

<style lang="scss">

.display-card {
  margin-top: 15px;
  margin-bottom: 5px;
}
</style>